<template>
  <div class="main">
    <topHeader :title="$t('agv.title')"></topHeader>
    <div class="h-2"></div>
    <div class="d-flex flex-row h-90">
      <div class="agvMachine-list--wrap bg-custom w-30 m-2">
        <table class="table-wrap table1">
          <thead class="work_status--header">
            <tr>
              <th>{{ $t('agv.filedname1') }}</th>
              <th>{{ $t('agv.filedname2') }}</th>
              <th>{{ $t('agv.filedname3') }}</th>
              <th>{{ $t('agv.filedname4') }}</th>
            </tr>
          </thead>
          <tbody class="w-100 work_status--content"
            :style="agvMachineList.length > 15 ? 'animation-duration: ' + duration + 's' : ''">
            <tr v-for="(item, index) in agvMachineList" :key="index" :class="stateAgv(item.stateId)">
              <td>{{ item.name }}</td>
              <td>{{ item.state }}</td>
              <td class="w-30">-----</td>
              <td :style="{color:energy(item.batteryPercentile)}">{{ item.batteryPercentile }}%</td>
            </tr>
          </tbody>
        </table>
        <div class="text-white text-center" v-if="agvMachineList.length<=0">暂无数据</div>
      </div>

      <div class="w-70">
        <!-- http://192.168.10.81:4333 admin|AGV_Board 123456-->
        <div class="w-100 h-100 my-iframe">
          <!-- <iframe src="http://localhost:5174/" ref="iframes" style="width: 100%;height: 100%;" id="myiframe" @load="onLoad"></iframe> -->
          <iframe src="http://192.168.12.20:4333" ref="iframes" style="width: 100%;height: 100%;" frameborder="no" border="0"  id="agviframe" ></iframe>

        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import topHeader from '@/components/topHeader/index.vue'
import { getAGV } from '@/service/api/index'
const agvMachineList = ref<{
  batteryPercentile: number,
  name: string,
  state: string,
  stateId:number
}[]>([])
const timer: any = reactive({
  timeData: 0,
  timerData: null,
  intervalData: 10000
})
const duration = ref(0)
const getData = async () => {
  let res: any = await getAGV()
  agvMachineList.value = res.data
}
const realTimeFresh = async () => {
  let currTimeData = new Date().getTime()
  if ((currTimeData - timer.timeData) > timer.intervalData || timer.timeData === 0) {
    timer.timeData = new Date().getTime()
    getData()
  }
  timer.timerData = requestAnimationFrame(realTimeFresh)
}
const stateAgv = (state: number) => {
  if ([6, 7, 8].includes(state)) { // 异常
    return 'red_highlight'
  }
}
const energy = (num:number)=>{
  if(num>=80){
    return '#3CB371'
  }else if(num>=40){
    return '#FFD700'
  }else{
    return '#B22222'
  }
}
onMounted(async () => {
  realTimeFresh()
})
onUnmounted(() => {
  cancelAnimationFrame(timer.timerData)
})
</script>

<style  scoped>
.agvMachine-list--wrap {
  position: relative;
  color: white;
  overflow: hidden;
}

.shade_box {
  height: 20px;
  z-index: 111;
  position: absolute;
  left: 0;
  top: 0px;
  right: 0;
}

.status-desc--list {
  margin-top: 1.5%;
}

.status-desc--item {
  margin-right: 3vh;
}

.status-desc--color {
  width: 16px;
  height: 16px;
  display: block;
  margin-right: .5vh;
}

.status-desc--val {
  color: #fff;
  line-height: 14px;
}

.work_status--header th,
.work_status--content td {
  padding: 1rem 0;
  text-align: center;
}

.work_status--header tr {
  background: #0a2a2c;
}

.work_status--content tr {
  background-color: #233b3e;
}

.table-wrap {
  border-collapse: separate;
  width: 100%;
  overflow: hidde;
  word-wrap: break-word;
  border-spacing: 0 1.2rem;
  padding: 0 1rem;
}

.red_highlight {
  animation: red_highlight_bg 1.5s linear infinite;
}
@keyframes red_highlight_bg {
  0% {
    box-shadow: 0 0 0 0 rgb(197, 42, 1);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(197, 42, 0.3);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(197, 42, 0);
  }
}

</style>